<template>
  <div class="register-container relative">
    <div @click="toLogin" class="absolute cursor-pointer left-8 top-8 font-black text-2xl text-[#005573] shadow-inner ">
      ←返回登录页</div>
    <div
      class="login-card relative before:content-['找回密码'] before:text-4xl before:text-[#dbdbdb] before:opacity-50 before:absolute before:left-[50%] before:translate-x-[-50%] before:top-26">
      <div class="title">
        <img src="@/assets/layouts/logo-text-2.png" />
      </div>
      <div class="content">
        <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" @keyup.enter="handleLogin">

          <el-form-item prop="email" class="email relative ">
            <el-input v-model.trim="loginFormData.email" placeholder="请输入邮箱" type="email" tabindex="2"
              :prefix-icon="Monitor" size="large" />
            <el-button class="!w-21 !h-full" @click="sendEmail" :disabled="sendEmailRef">{{ emailMes }}</el-button>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model.trim="loginFormData.code" autocomplete="off1" placeholder="请输入收到的邮箱验证码" type="text" tabindex="2"
              :prefix-icon="Ticket" size="large" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model.trim="loginFormData.password" placeholder="密码" type="password" tabindex="2"
              :prefix-icon="Lock" size="large" show-password />
          </el-form-item>
          <el-form-item prop="rePassword">
            <el-input v-model.trim="loginFormData.rePassword" placeholder="请确认密码" type="password" tabindex="2"
              :prefix-icon="Lock" size="large" show-password />
          </el-form-item>
          <el-button class="!bg-[#005573]" :loading="loading" type="primary" size="large"
            @click.prevent="handleFind">完成找回</el-button>

        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { LoginRequestData } from "@/api/login/types/login";
import { Lock, Monitor, Ticket } from "@element-plus/icons-vue"
import { ElMessage } from 'element-plus'

let { proxy } = getCurrentInstance() as any
const loading = ref(false)
let router = useRouter()
let sendEmailRef = ref(false)
let emailMes = ref('发送验证码')
let emailRes = ref(false)
const sendEmail = () => {
  let url = '/admin-api/wpes/user/send-mail-code'
  let params = {
    scene: '3', //  重置密码
    email: loginFormData.email
  }
  proxy.$http.post(url, params, { headers: { "tenant-id": 1 } }).then(v => {
    let { code } = v.data
    if (code === 0) {
      emailMes.value = '发送成功'
      ElMessage.info('下次可在1分钟后再次发送')
      emailRes.value = true
      sendEmailRef.value = true
      setTimeout(() => {
        sendEmailRef.value = false;
        emailMes.value = '发送验证码';
      }, 60000);
    }
  })

}

const loginFormRules = {
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }
  ],
  rePassword: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }
  ],
  email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
}
const loginFormData: LoginRequestData = reactive({
  password: "",
  rePassword: '',
  email: '',
  code: ''
})
const toLogin = () => {
  router.push({ path: '/login' })
}
const handleFind = () => {
  let url = '/admin-api/wpes/user/reset-password';
  let params = {
    newPassword: loginFormData.password,
    email: loginFormData.email,
    code: loginFormData.code
  }
  if (loginFormData.password !== loginFormData.rePassword) {
    ElMessage.error('两次输入的密码不一致！')
    return
  }
  if (loginFormData.code == '') {
    ElMessage.error('请输入验证码！')
    return
  }
  proxy.$http.post(url, params, { headers: { "tenant-id": 1 } }).then(v => {
    if (v.data.code === 0) {
      ElMessage.success('覆盖原密码成功！请使用新密码登录！')
      setTimeout(toLogin, 600);
    } else {
      ElMessage.info(v.data.msg)
    }
  }).catch(e => {
    ElMessage.error('网络错误,请检查!')
    console.log(e)
  })
}
</script>
<style lang='scss' scoped>
.email {
  :deep(.el-form-item__content) {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
  }
}

.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;

  .theme-switch {
    position: fixed;
    top: 5%;
    right: 5%;
    cursor: pointer;
  }

  .login-card {
    width: 480px;
    border-radius: 20px;
    box-shadow: 0 0 10px #dcdfe6;
    background-color: #fff;
    overflow: hidden;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;

      img {
        height: 100%;
      }
    }

    .content {
      padding: 20px 50px 50px 50px;

      :deep(.el-input-group__append) {
        padding: 0;
        overflow: hidden;

        .el-image {
          width: 100px;
          height: 40px;
          border-left: 0px;
          user-select: none;
          cursor: pointer;
          text-align: center;
        }
      }

      .el-button {
        width: 100%;
      }
    }
  }
}
</style>